<template>
  <Container>
    <div class="bg-light">
        <Tabs >
          <TabPane label="店铺设置" name="tab1">
            <Form :label-width="160" ref="form" :rules="rule" :model="form">
              <FormItem label="店铺名称" prop="name">
                <Input v-model="form.name" :maxlength="15" class="w200"/>
              </FormItem>
              <FormItem label="客服电话" prop="phone">
                <Input v-model="form.phone" :maxlength="30" class="w200"/>
              </FormItem>
              <FormItem label="图片" prop="imgPath">
                <PictureEditItem :uploadList="uploadList" :maxlength="1" upLoadType="image" @uploadPic="uploadPic"></PictureEditItem>
              </FormItem>
            </Form>
          </TabPane>
        </Tabs>
    </div>
    <div class="container-footer bg-white" slot="footer">
      <Button type="primary" size="large" class="ml" @click="onPrevertion">保存</Button>
    </div>
    <Loader :status="status" @refresh="getData"></Loader>
  </Container>
</template>
<script>
const phoneValid = (rule, value, callback) => {
  if (!value) {
    callback(new Error('请输入电话号码'))
  } else if (!(/^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\d{8}$|^0\d{2,3}-?\d{7,8}$/.test(value))) {
    callback(new Error('请输入正确格式的电话号码'))
  } else {
    callback()
  }
}
import PictureEditItem from "@/components/PictureEditItem"
export default {
  components: {
    PictureEditItem
  },
  data() {
    return {
      form: {
        name: '',
        phone: '',
        imgPath: ''
      },
      rule: {
        name: [{required: true, message: '请输入店铺名称', trigger: 'blur'}],
        phone: [{required: true, validator: phoneValid,  trigger: 'blur'}],
        imgPath: [{ required: true, message: "请上传广告图片", trigger: "blur" }]
      },
      uploadList: [],
      status: 'pass'
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      this.status = 'loading'
      this.$ajaxGet('/supplier/supplier_info/info').then(data => {
        this.status = 'pass'
        this.form.name = data.storeInfo.name
        this.form.phone = data.storeInfo.serviceTel
        this.form.imgPath = !data.storeInfo.logoUrl ? '' : data.storeInfo.logoUrl 
        this.uploadList = data.storeInfo.logoUrl ? [{
          imgUrl: data.storeInfo.logoUrl,
          status: "finished"
        }] : []
      })
    },
    uploadPic(value) {
      this.form.imgPath = value.length > 0 ? value[0].url.path : "";
    },
    onPrevertion() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          let param = {
            name: this.form.name,
            serviceTel: this.form.phone,
            logoUrl: this.form.imgPath
          }
          this.$jsonPost('/supplier/store_info/update', param).then(data => {
            this.$Notice.success({
              title: "编辑成功" 
            })
            this.getData()
          })
        }
      })
    }
  }
}
</script>